<template>
  <div class="mnh-form-detail">
    <div
      class="mnh-form-detail-item"
      :style="`width: calc(100%/${item.colNum || colNum});`"
      v-for="(item, index) in option"
      :key="index"
    >
      <div class="mnh-form-detail-label" :style="`width: ${labelWidth}px;`">
        {{ item.label }}{{ !item.hideColon ? "：" : "" }}
      </div>
      <div class="mnh-form-detail-span">
        <span class="mnh-form-detail-span-main" v-if="item.type === 'slot'">
          <slot></slot>
        </span>
        <span class="mnh-form-detail-span-main" v-else-if="item.type === 'mix'">
          <span v-for="(t, i) in item.propList" :key="i">
            <span>{{ data[t] }}</span>
            <span v-if="item.propUtilList">{{ item.propUtilList[i] }}</span>
            <span v-if="i < item.propList.length - 1">
              <span v-if="item.propSign">{{ item.propSign[i] }}</span>
              <span v-else>/</span>
            </span>
          </span>
        </span>
        <span class="mnh-form-detail-span-main" v-else-if="item.type === 'fn'">
          {{ item.fn(data[item.prop], item.params) }}
        </span>
        <span
          class="mnh-form-detail-span-main"
          v-else-if="item.type === 'filter'"
        >
          {{ item.format(data) }}
        </span>
        <span
          class="mnh-form-detail-span-main"
          v-else-if="item.type === 'dict'"
        >
          {{ dictFormat(item.prop, item.props) }}
        </span>
        <span class="mnh-form-detail-span-main" v-else>
          {{ data[item.prop] }}
        </span>
        <!-- 后缀 -->
        <span class="mnh-form-detail-span-data" v-if="item.data !== undefined">
          {{ item.data }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    colNum: {
      default: 2
    },
    labelWidth: {
      default: "80"
    },
    data: {
      type: Object,
      default: () => {}
    },
    option: {
      type: Array,
      default: () => []
    },
    dict: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    dictFormat(prop, props = { value: "value", label: "label" }) {
      const dict = this.dict[prop];
      if (!dict || !this.data[prop]) {
        return "";
      } else {
        const row = dict.find(m => m[props.value] === this.data[prop]);
        return row[props.label];
      }
    }
  }
};
</script>

<style scoped lang="scss">
.mnh-form-detail {
  display: flex;
  flex-wrap: wrap;
  .mnh-form-detail-item {
    display: flex;
    font-size: 14px;
    margin-bottom: 10px;
    .mnh-form-detail-label {
      text-align: right;
    }
    .mnh-form-detail-span {
      flex: 1;
    }
  }
}
</style>
